<template>
	<view
		class="container"
		:style="{
			paddingTop: topSafeArea * 2 + 'rpx',
			paddingBottom: bottomSafeArea * 2 + 'rpx',
			paddingLeft: leftSafeArea * 2 + 'rpx',
			paddingRight: rightSafeArea * 2 + 'rpx',
			background: background,
		}"
	>
		<slot></slot>
	</view>
</template>

<script>
export default {
	name: 'SafeAreaContainer',
	props: {
		// 是否启用顶部安全区（默认 true）
		top: {
			type: Boolean,
			default: true,
		},
		// 是否启用底部安全区（默认 true）
		bottom: {
			type: Boolean,
			default: true,
		},
		// 是否启用左右安全区（一般不需要，但保留扩展性）
		left: {
			type: Boolean,
			default: false,
		},
		right: {
			type: Boolean,
			default: false,
		},
		// 额外增加的 padding（单位 px）
		extraTop: {
			type: [Number, String],
			default: 0,
		},
		extraBottom: {
			type: [Number, String],
			default: 0,
		},
		extraLeft: {
			type: [Number, String],
			default: 0,
		},
		extraRight: {
			type: [Number, String],
			default: 0,
		},
		background: {
			type: String,
			default: 'transparent',
		},
		// 是否忽略小程序导航栏高度（有胶囊按钮的那个地方）
		isIgnoreMiniNavBar: {
			type: Boolean,
			default: false,
		},
		// 是否忽略导航栏高度（有胶囊按钮的那个地方）
		// 忽略的话，就不会增加导航栏高度
		miniNavBarHeight: {
			type: Number,
			default: 50,
		},
		// 是否忽略顶部安全区（默认 false）
		ignoreSafeAreaTop: {
			type: Boolean,
			default: false,
		},
		// 是否忽略底部安全区（默认 false）
		ignoreSafeAreaBottom: {
			type: Boolean,
			default: false,
		},
		// 是否忽略左边安全区（默认 false）
		ignoreSafeAreaLeft: {
			type: Boolean,
			default: false,
		},
		// 是否忽略右边安全区（默认 false）
		ignoreSafeAreaRight: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		topSafeArea() {
			if (!this.top) return 0;
			const statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 0;
			// 在小程序中，导航栏高度通常是 44px（iOS）或 48px（Android）
			// 如果你使用的是自定义导航栏，只需要状态栏高度
			// 如果是原生导航栏，通常不需要额外处理顶部
			// 此处假设是自定义导航栏，只加状态栏高度
			console.log('statusBarHeight', statusBarHeight);
			if (!this.ignoreSafeAreaTop) {
				// 是否忽略小程序导航栏高度（有胶囊按钮的那个地方）
				// 忽略的话，就只加状态栏高度
				// #ifdef MP-WEIXIN
				if (!this.isIgnoreMiniNavBar) {
					return (
						statusBarHeight +
						this._toNum(this.extraTop) +
						this.$props.miniNavBarHeight
					);
				}
				// #endif
				return statusBarHeight + this._toNum(this.extraTop);
			} else {
				return 0;
			}
		},
		bottomSafeArea() {
			if (!this.bottom) return 0;
			// 获取安全区底部高度（仅部分平台支持）
			const sys = uni.getSystemInfoSync();
			// iOS 安全区域底部高度可通过 safeAreaInsets 获取（仅 App 和部分小程序）
			let bottomInset = 0;
			if (sys.safeAreaInsets) {
				bottomInset = sys.safeAreaInsets.bottom;
			} else {
				// 兜底：iPhone X 及以上机型底部通常为 34px
				// 可根据设备型号判断，但较复杂，此处简化处理
				if (sys.model && /iPhone/.test(sys.model) && sys.windowHeight >= 812) {
					bottomInset = 34;
				}
			}
			if (!this.ignoreSafeAreaBottom) {
				// 是否忽略底部安全区（默认 false）
				return bottomInset + this._toNum(this.extraBottom);
			} else {
				return 0;
			}
		},
		leftSafeArea() {
			if (!this.left) return 0;
			const sys = uni.getSystemInfoSync();
			if (!this.ignoreSafeAreaLeft) {
				return (sys.safeAreaInsets?.left || 0) + this._toNum(this.extraLeft);
			} else {
				return 0;
			}
		},
		rightSafeArea() {
			if (!this.right) return 0;
			const sys = uni.getSystemInfoSync();
			if (!this.ignoreSafeAreaRight) {
				return (sys.safeAreaInsets?.right || 0) + this._toNum(this.extraRight);
			} else {
				return 0;
			}
		},
	},
	methods: {
		_toNum(val) {
			return typeof val === 'string' ? parseFloat(val) || 0 : val;
		},
	},
};
</script>

<style scoped>
.container {
	width: 100%;
	min-height: 0px;
	/* 再此处配置安全区域的背景色或背景图片 */
	box-sizing: border-box;
}
</style>
